<template>
	<div class="sw_system_container">
		<div class="sw_query_form">
			<div class="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			</div>
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.content" clearable placeholder="字典名称" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="queryData.code" clearable placeholder="字典编码" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.type" clearable placeholder="字典类型" style="width: 100px">
						<el-option label="枚举" value="1"></el-option>
						<el-option label="常量" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.isConfig" clearable placeholder="是否配置" style="width: 100px">
						<el-option label="是" value="1"></el-option>
						<el-option label="否" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="getTabelData">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table size="medium" :data="tableData" stripe height="100%">
				<el-table-column prop="content" label="字典名称" min-width="200"></el-table-column>
				<el-table-column label="字典编码" min-width="200">
					<template slot-scope="{ row }">
						<template v-if="row.type !== '1'">
							{{ row.code }}
						</template>
						<el-button v-else type="text" @click="handleOpenDrawer(row)">{{ row.code }}</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="字典描述" min-width="200"></el-table-column>
				<el-table-column prop="type" label="字典类型" min-width="80">
					<template slot-scope="{ row }">
						<el-tag size="medium" v-if="row.type === '1'">枚举</el-tag>
						<el-tag size="medium" type="warning" v-if="row.type === '2'">常量</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="是否配置" min-width="80">
					<template slot-scope="{ row }">
						<el-tag size="medium" v-if="row.isConfig === '1'">是</el-tag>
						<el-tag size="medium" type="warning" v-if="row.isConfig === '2'">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleOpenDialog(row)">修改</el-button>
						<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="getTabelData"></sw-pagination>
		<dict-form v-model="dictDialog" :dict-data="dictData" @refresh="getTabelData"></dict-form>
		<dict-drawer v-model="dictDrawer" :dict-id="dictId"></dict-drawer>
	</div>
</template>

<script>
import dictDrawer from './data';
import dictForm from './dictForm';
import { getDictDefineList, deleteDictDefine } from '@/api/system/tbSysDictDefinition';
export default {
	components: { dictDrawer, dictForm },
	data() {
		return {
			loading: false,
			dataCount: 0,
			queryData: {
				page: 1,
				limit: 15
			},
			tableData: [],
			dictDrawer: false,
			dictId: null,
			dictDialog: false,
			dictData: {}
		};
	},
	mounted() {
		this.getTabelData();
	},
	methods: {
		//获取表格数据
		async getTabelData() {
			let params = { ...this.queryData };
			let result = await getDictDefineList(params).then((res) => res.data);
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = !result.data ? [] : result.data;
			}
		},

		//打开表单
		handleOpenDialog(row) {
			this.dictDialog = true;
			this.dictData = !row ? {} : { ...row };
		},

		//删除数据
		handleDeleteData(row) {
			let that = this;
			that.$confirm(`此操作将删除字典<font color="#f00">【${row.content}】</font>, 是否继续?`, '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(row);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//打开抽屉
		handleOpenDrawer(row) {
			this.dictId = row.id;
			this.dictDrawer = true;
		},

		//删除数据请求
		async deleteDataRequest(row) {
			let result = await deleteDictDefine(row.id).then((res) => res.data);
			if (result.code === '0') {
				this.getTabelData();
				this.$showCustomMessage('success', `删除字典成功`);
				this.$store.dispatch('getOpenDictData');
			}
		}
	}
};
</script>

<style scoped></style>
